<template>
  <div class="app">
    <div class="takeout-head">
      <header-component></header-component>
    </div>
    <div class="takeout-tab">
      <tab-component></tab-component>
    </div>
    <div class="takeout-router">
      <router-view />
    </div>
    <div class="takeout-footer">
      <footer-component></footer-component>
    </div>
  </div>
</template>

<script setup></script>

<style scoped lang="less">
.app {
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  .takeout-head {
    width: 100vw;
    height: 100px;
    background: rgb(218, 184, 184);
    display: flex;
    flex-direction: column;
  }
  .takeout-tab {
    width: 100vw;
    height: 30px;
  }
  .takeout-router {
    width: 100vw;
    flex: 1; /* 明确设置flex-grow属性 */
    overflow: auto; /* 如果内容超出可视区域，可以滚动 */
  }
  .takeout-footer {
    width: 100vw;
    height: 40px;
    background: rgb(9, 9, 9);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
  }
}
</style>
